<template>
  <div
    class="container"
    @mousedown="mouseDown"
  >
    <h1>ToDoList</h1>
    <h3>共有<span style="color:red">{{state.lists.length}}</span>个未完成，<span style="color:green">{{state.finished.length}}</span>个完成</h3>
    <h2>未完成列表</h2>
    <ul>
      <div
        v-for="(item, index) in state.lists"
        :key="index"
         class="item"
      >
        <li v-if="!item.checked"><input
            type="checkbox"
            v-model="item.checked"
          ><span
            v-if="!item.isEdit"
            @dblclick="showEdit(item,index)"
          >{{item.name }}</span>
          <input
            type="text"
            v-model="state.editName"
            v-if="item.isEdit"
            ref="myinput"
          >
          <button @click="del(index)">删除</button>
        </li>
      </div>
    </ul>
    <h2>完成列表</h2>
    <ul>
      <li
        v-for="(item,index) in state.finished"
        :key="index"
      > ✔ {{item.name}}</li>
      <p
        v-if="state.finished.length ===0"
        style="color:red"
      >还没有完成的任务哦！</p>
    </ul>
    <h2>添加任务</h2>
    <!-- keydown回车添加 -->
    <input
      type="text"
      v-model="state.value"
      placeholder="添加新的task"
      @keydown.enter="state.add()"
    >
    <button @click="state.add()">添加</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref } from "vue";

export default defineComponent({
  //需求拆分
  //1. 加入checkbox => checked
  //2. 统计checked -> 放到finished列表
  //3.add 添加item -> item 数据{name，checked ，isEdit}
  //4.双击编辑
  //5.删除
  setup() {
    const state = reactive({
      editIndex: 0,
      editName: "",
      vaule: "",
      lists: [
        {
          name: "读一小时书",
          checked: false,
          isEdit: false,
        },
        {
          name: "跑20min步",
          checked: false,
          isEdit: false,
        },
        {
          name: "早睡！！",
          checked: false,
          isEdit: false,
        },
        

      ],
      finished: computed(() =>
        state.lists.filter((item) => item.checked === true)
      ),
      //add可以放在state 里，也可以直接setup return出去
      add,
    });
    const myinput = ref(null);
    //添加任务
    function add() {
      state.lists.push({
        name: state.value,
        checked: false,
        isEdit: false,
      });
      //置空，下一次添加的时候默认为空
      state.value = "";
    }
    function showEdit(item, index) {
      console.log("db");
      state.editIndex = index;
      state.editName = item.name;
      item.isEdit = true;
    }
    //点击输入框外的位置保存
    const mouseDown = (e) => {
        console.log("down");
      if (myinput.value && e.target !== myinput.value) {
          state.lists[state.editIndex] = {
              name:state.editName,
              checked:false,
              isEdit:false
          }
      }
    };
    //删除
    const del = (index)=>{
       state.lists.splice(index,1);
    }
    onMounted(()=>{
        window.addEventListener("scroll",scollHandler);
    })
    function scollHandler(){
        let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(top>30){
            console.log(">>>>30!!!!");
        }
        console.log(top);
    }

    return {
      state,
      showEdit,
      myinput,
      mouseDown,
      del,
      scollHandler
      //add,
      //showEdit，

    };
  },
});
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: left;
}

.item button{
    float: right;
}
ul {
  margin: 0 auto;
  padding: 0;
}
li {
  margin: 0 auto;
  list-style: none;
  border: 1px solid rgb(158, 157, 157);
  margin: 20px;
  width: 500px;
  text-align: left;
}
</style>
